<template>
  <a-drawer v-model:open="open"
            width="89%"
            :title="'新增'+ formState.liuChengLeiXing+'流程'"
            :keyboard="false"
            :mask-closable="false"
            @close="handleClose"
            @cancel="handleClose">
    <a-form :model="formState"
            name="basic"
            layout="vertical"
            style="width: 100%;"
            ref="formRef"
            :rules="rules"
            :label-col=" { style: { width: '100%' } }"
            :wrapper-col="{ span: 24}"
            autocomplete="off"
    >
      <a-row :gutter="16">
        <a-col class="gutter-row" :span="24">
          <a-form-item required>
            <template #label>
              <span class="fw">名称</span>
            </template>
            <a-input placeholder="请填写" maxlength="100" v-model:value="formState.mingCheng" class="w100"></a-input>
          </a-form-item>
          <a-form-item required>
            <template #label>
              <span class="fw">适用船舶</span>
            </template>
            <div>
              <a-checkbox v-model:checked="chuanboChecked">全部</a-checkbox>
              <a-button @click="handleOpenCb" :disabled="chuanboChecked" type="primary" size="small">新增</a-button>
            </div>
            <div class="gui-padding mt10 mainbg6">
              <a-tag :bordered="false" class="mr5 mb5" closable @close="handleDelMingTag(index)"
                     v-for="(item,index) in chuanBoMingListArr">{{ item }}
              </a-tag>
            </div>
          </a-form-item>
          <a-form-item required>
            <template #label>
              <span class="fw">适用职位</span>
            </template>
            <a-checkbox v-model:checked="zhiweiChecked">全部</a-checkbox>
            <a-button @click="handleOpenJw" :disabled="zhiweiChecked" type="primary" size="small">新增</a-button>
            <div class="gui-padding mt10 mainbg6">
              <a-tag :bordered="false" class="mr5 mb5" closable @close="handleDelZhiweiTag(index)"
                     v-for="(item,index) in zhiWeiMingListArr">{{ item }}
              </a-tag>
            </div>
          </a-form-item>
        </a-col>

        <a-col class="gutter-row" :span="24">
          <a-form-item>
            <template #label>
              <div class="flex flex-wrap">
                <span class="fw">备注</span>
              </div>
            </template>
            <a-textarea placeholder="请填写" maxlength="400" v-model:value="formState.beiZhu" rows="3"></a-textarea>
          </a-form-item>
        </a-col>
        <a-col class="gutter-row" :span="24">
          <div class=" loading-container" style="padding-bottom: 50px">
            <div class="flex-row enquiry-order-process">
              <div class="first">
                <div></div>
              </div>
              <div class="two"><b class="ng-binding">流程审批步骤</b></div>
            </div>
            <div class="flex-row enquiry-order-process-table">
              <div class="line">
                <div></div>
              </div>
              <div style="width: calc(100% - 20px)">
                <div style="color: #e6674a;margin: 5px 0 15px 0;" class="ng-binding">
                  审批步骤：此步骤用于对船员调令进行审批，对上船船员的资质进行审核，觉得不合适，可以拒绝审批。
                </div>
                <div class="table-responsive">
                  <div fixed-columns="2" fixed-table-column="" is-sidebar-closed="false" right-element=""
                       class="ng-isolate-scope">
                    <div class="fixed-table-container other-special-css" style="max-width: calc(-250px + 100vw);">
                      <table class="fixed-table table table-striped table-hover fixed-table-last" frame="below"
                             style="margin-bottom: 0">
                        <thead class="thead-th-weight"></thead>
                        <thead class="thead-th-weight">
                          <tr class="minHeight">
                            <th class="ng-binding">步骤</th>
                            <th class="ng-binding">处理角色<span class="symbol required"></span></th>
                            <th class="ng-binding">节点名称</th>
                            <th class="ng-binding" style="box-shadow: none; word-spacing: -11px;">操作</th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr v-for="(item,index) in formState.buZhouList"  class="ng-scope" :key="index">
                            <td style="vertical-align: middle;" class="ng-binding">{{index+1}}</td>
                            <td style="vertical-align: middle;">
                              <a-select placeholder="请选择" class="w100" v-model:value="item.jueSeId">
                                <a-select-option  @click="handleChangeRole(citem.roleName,item)" :value="citem.id" v-for="(citem,rindex) in roleArr" :key="rindex">{{citem.roleName}}</a-select-option>
                              </a-select>
                            </td>
                            <td style="vertical-align: middle;">
                              <a-input placeholder="请填写" v-model:value="item.jieDianMing" maxlength="100"></a-input>
                            </td>
                            <td style="vertical-align: middle;">
                              <button v-if="index == 0" type="button" @click="handleAddRow(index)"  class="text-btn text-info ng-binding">在其后插入步骤
                              </button>
                             <a-popconfirm title="你确定删除吗?"  @confirm="handleDelRow(index)">
                               <button type="button"  class="text-btn text-danger ng-binding">删除</button>
                             </a-popconfirm>
                            </td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </a-col>
        <div
            style="position: fixed;bottom:0;right:0;padding:10px;border-top:1px solid #eee;width: 89%;background:#fff;z-index: 1">
          <div class="flex" style="justify-content: flex-end">
            <a-button type="primary" class="mr10" :loading="addLoading" @click="handleSubmit">确定</a-button>
            <a-button @click="handleClose">取消</a-button>
          </div>
        </div>
      </a-row>
    </a-form>
    <add-flow-jw ref="jwRef" @callback="handleFlowJw"></add-flow-jw>
    <add-flow-cb ref="cbRef" @callback="handleFlowCb"></add-flow-cb>
  </a-drawer>
</template>
<script setup>
import AddFlowJw from "./AddFlowJw.vue";
import AddFlowCb from "./AddFlowCb.vue";

const addLoading = ref(false);
const open = ref(false);
const zhiweiChecked = ref(true);
const chuanboChecked = ref(true);
const formRef = ref({})
const jwRef = ref({})
const cbRef = ref({})
const roleArr = ref([])
const emits = defineEmits(["success"])
const chuanBoMingListArr = ref([])
const zhiWeiMingListArr = ref([])
const formState = ref({
  liuChengLeiXing: '',
  mingCheng: '',
  beiZhu: '',
  chuanBoMingList: ['全部'],
  zhiWeiMingList: ['全部'],
  buZhouList: [{}],
});

// 验证规则
const rules = {
  // account: [{required: true, message: '请输入账号', trigger: 'blur'}],
  // username: [{required: true, message: '请输入昵称', trigger: 'blur'}],
};

const handleChangeRole = (e,item)=>{
  item.jueSeMing = e
}
const handleAddRow = (index)=>{
  formState.value.buZhouList.push({})
}
const handleDelRow = (index)=>{
  formState.value.buZhouList.splice(index,1)
}

const handleSubmit = async () => {
  try {
    addLoading.value = true
    formState.value.chuanBoMingList = (chuanBoMingListArr.value && chuanBoMingListArr.value.length > 0) ? chuanBoMingListArr.value : ['全部']
    formState.value.zhiWeiMingList = (zhiWeiMingListArr.value && zhiWeiMingListArr.value.length > 0) ? zhiWeiMingListArr.value : ['全部']
    await useSaveUpdateLiuChengDingYiApi(formState.value)
    addLoading.value = false
    useMessage().success("操作成功")
    emits("success")
    handleClose()
  } catch (e) {
    addLoading.value = false
    useMessage().error(e.msg)
  }
}

const handleDelMingTag = (index) => {
  chuanBoMingListArr.value.splice(index, 1)
}

const handleDelZhiweiTag = (index) => {
  zhiWeiMingListArr.value.splice(index, 1)
}

const handleFlowJw = (data) => {
  zhiWeiMingListArr.value = Array.from(new Set(zhiWeiMingListArr.value.concat(data)))
}
const handleFlowCb = (data) => {
  chuanBoMingListArr.value = Array.from(new Set(chuanBoMingListArr.value.concat(data)))
}

const handleLoadRoleData = async () => {
  const resp = await useLoadRoleApi({pageSize:500})
  roleArr.value = resp.data.records
}

const handleOpen = async (record, lname) => {
  open.value = true
  await handleLoadRoleData()
  if (record && record.id) {
    const resp = await useGetLiuChengDingYiApi(record.id)
    formState.value = resp.data
    chuanBoMingListArr.value = Array.from(new Set(resp.data.chuanBoMingList))
    zhiWeiMingListArr.value = Array.from(new Set(resp.data.zhiWeiMingList))
    chuanboChecked.value = !(resp.data.chuanBoMingList.filter(c=>c=='全部').length == 0)
    zhiweiChecked.value = !(resp.data.zhiWeiMingList.filter(c=>c=='全部').length == 0)
  }
  formState.value.liuChengLeiXing = lname
}

const handleOpenCb = async (record) => {
  cbRef.value.handleOpen()
}

const handleOpenJw = async (record) => {
  jwRef.value.handleOpen()
}

const handleClose = () => {
  open.value = false
  chuanBoMingListArr.value = []
  zhiWeiMingListArr.value = []
  zhiweiChecked.value = true;
  chuanboChecked.value = true;
  formState.value = {
    id: "",
    liuChengLeiXing: '',
    mingCheng: '',
    beiZhu: '',
    chuanBoMingList: ['全部'],
    zhiWeiMingList: ['全部'],
    buZhouList: [{}],
  }
}

defineExpose({
  handleOpen
})
</script>

<style lang="scss" scoped>
.full-modal {
  .ant-modal {
    max-width: 100%;
    top: 0;
    padding-bottom: 0;
    margin: 0;
  }

  .ant-modal-content {
    display: flex;
    flex-direction: column;
    height: calc(100vh);
    overflow: auto;
    border-radius: 0px;
  }

  :where(.css-dev-only-do-not-override-1hsjdkk).ant-modal .ant-modal-header {
    background: transparent;
  }

  .ant-modal-body {
    flex: 1;
  }
}

.loading-container {
  position: relative
}

.loading-container .loading .loading-div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}

.loading-container .loading .loading-div .loading-div-column {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-align: center;
  align-items: center
}

.enquiry-order-process .first {
  width: 20px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: end;
  align-items: flex-end;
  margin-right: 15px
}

.enquiry-order-process .first-null, .enquiry-order-process-table .line {
  width: 20px;
  display: -ms-flexbox;
  -ms-flex-pack: center;
  margin-right: 15px
}

.enquiry-order-process .first div {
  width: 20px;
  height: 20px;
  border-radius: 20px;
  background: #3296e1
}

.enquiry-order-process .first-null {
  display: flex;
  justify-content: center;
  -ms-flex-align: end;
  align-items: flex-end
}

.enquiry-order-process .first-null div {
  width: 20px;
  height: 20px;
  border-radius: 20px;
  background: #FFF;
  border: 1px solid #3296E1
}

.enquiry-order-process .two {
  font-size: 14px
}

.enquiry-order-process-table .line {
  display: flex;
  justify-content: center
}

.enquiry-order-process-table .line div {
  width: 2px;
  height: 100%;
  background: #3296e1
}

.enquiry-order-process-table .line-null {
  width: 20px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center
}

.enquiry-order-process-table .line-null div {
  width: 2px;
  height: 100%;
  background: #DDD
}

</style>
